@charset "UTF-8";

@import "../_kit/variables.scss";

/*
* 多选框
<label class="ui-checkbox">
    <input name=""/>
    <div class="frame"></div>
</label>
*/
.ui-checkbox{
    input[type="checkbox"]{
        display:none;
        &:checked + .frame{
            border-color:$primary-color;
            background:$primary-color;
            &:before{
                height:$rem*10;
            }
            &:after{
                height:$rem*25;
            }
        }
    }

    &-circle{
        .frame{
            border-radius:50%;
        }
    }
    .frame{
        width:$rem*30;
        height:$rem*30;
        background:#f1f1f1;
        border:1px solid #DBDBDB;
        position: relative;
        display:inline-block;
        margin-right:$rem*5;
        transition-timing-function: ease-in-out;
        transition-duration: 0.3s;
        transition-property: border background;
        &:after,
        &:before{
            content:'';
            background:#fff;
            width:$rem*4;
            position: absolute;
            border-radius:$rem*4;
            height:0;
            // transition-timing-function: ease-in-out;
            // transition-duration: 0.3s;
            // transition-property: height;
        }
        &:before{
            top:$rem*12;
            left:$rem*2;
            transform: rotate(-45deg);
        }
        &:after{
            top:$rem*1;
            left:$rem*12;
            transform: rotate(45deg);
        }
    }
}
